import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

import Main from '../views/Main.vue'
import Article from '../views/Article.vue'
import Hero from '../views/Hero.vue'
import Strategy from '../views/Strategy.vue'
import StrategyPages from '../views/StrategyPages.vue'
import Competition from '../views/Competition.vue'
import CompetitionPages from '../views/CompetitionPages.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Main,
    children: [
      { path: '/', name: 'home' ,component: Home },
      { path: '/articles/:id', name: 'article', component: Article, props: true },
      { path: '/strategy', name: 'strategy', component: Strategy },
      { path: '/strategy/:id', name: 'strategyPages', component: StrategyPages, props: true },
      { path: '/competition', name: 'competition', component: Competition },
      { path: '/competition/:id', name: 'competitionPages', component: CompetitionPages, props: true }
    ]
  },
  { path: '/heroes/:id', name: 'hero', component: Hero, props: true },
]

const router = new VueRouter({
  routes
})

export default router
